<template>
  <div class="personal-content bg-img front-color">
      <div class="title clearfix">
        <h3 class="page-title">{{pageTitle}}</h3>
        <span class="back pointer" @click="goBack">< {{$t('myAdd.personal.back')}}</span>
      </div>
      <!-- 修改登录密码 表单-->
      <div class="form-box">
        <template v-for="(item,key,index) in formList">
          <inline-input
              v-bind:property = "item"
              v-model = "item.value"
              v-on:onevents = "somethings"
              @textOrPassword="textOrPassword">
          </inline-input>
        </template>
        <div class="button-inline">
          <button @click="submit">{{buttonText}}</button>
        </div>
      </div>
      <p v-if='userinfo'></p>
  </div>
</template>

<script>
import InlineInput from '@/components/common/inlineInput'
import { mapState } from 'vuex'
export default {
  name: 'revisePassword',
  props: [],
  components: {
    InlineInput
  },
  data () {
    return {
      formList: {}
    }
  },
  mounted () {
    this.formList = this.formList_obj
  },
  computed: {
    ...mapState({
      userinfo ({baseData: {_user}}) {
        if (_user) {
          return _user
        } else {
          return false
        }
      }
    }),
    pageTitle () {
      return this.$t('personal.editLoginpass')
    },
    buttonText () {
      return this.$t('personal.confirmEdit')
    },
    formList_obj () {
      let obj = {
        loginPword: {
          title: this.$t('personal.oldLoginPass'),
          formType: 'password',
          type: null,
          name: 'loginPword',
          value: null,
          isShowEye: true
        },
        newLoginPword: {
          title: this.$t('personal.newLoginPass'),
          formType: 'password',
          type: null,
          name: 'newLoginPword',
          value: null,
          isShowEye: true
        }
      }
      if (this.userinfo.isOpenMobileCheck === 1) {
        Object.assign(obj, {
          aliyunCapcha: {
            title: this.$t('personal.aliyunCapcha'),
            formType: 'aliyunCapcha',
            alicapcha: {},
            scene: 'login'
          },
          smsAuthCode: {
            title: this.$t('personal.smsAuthCode'),
            formType: 'verifiCode',
            name: 'smsAuthCode',
            operationType: 5,
            startTime: false,
            data: ['aliyunCapcha'],
            value: null
          }
        })
      }
      if (this.userinfo.googleStatus === 1) {
        Object.assign(obj, {
          googleCode: {
            title: this.$t('personal.googleCode'),
            formType: 'text',
            type: null,
            name: 'googleCode',
            value: null
          }
        })
      }
      return obj
    }
  },
  watch: {
    'userinfo' () {
      this.formList = this.formList_obj
    },
    'formList_obj' (val) {
      this.formList = val
    }
  },
  methods: {
    somethings (value) {
      if (value.handleType === 'sendCode') {
        this.sendCode(value)
      }
    },
    // 发送验证码
    sendCode (item) {
      let data = {}
      let fla = true
      let arr = this.formList[item.name].data || []
      if (this.formList[item.name].startTime) return false
      if (arr.length > 0) {
        arr.map((item) => {
          if (item === 'aliyunCapcha') {
            if (!this.formList[item].alicapcha.token) {
              fla = false
              this.$set(this.formList[item], 'errorInfo', this.$t('personal.text_6'))
            }
            data = Object.assign({}, this.formList[item].alicapcha, data)
            this.formList[item].alicapcha = {}
          }
        })
      }
      if (!fla) return false
      data.operationType = this.formList[item.name].operationType
      this.formList[item.name].startTime = true // 开启倒计时
      data.nc && data.nc.reset() // 重置滑动验证
      data.nc = null
      this.commonHttp.smsValidCode(data).then((data) => {
        if (data.code === '0') {
          this.$store.dispatch('setTipState', this.$t('personal.text_8'))
        } else {
          this.smsAuthCode.startTime = false // 关闭倒计时
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    submit () {
      let data = {}
      let fla = true
      let passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z_]{8,16}$/
      for (let item in this.formList) {
        if (this.formList[item].value !== undefined && !this.formList[item].value) {
          this.$set(this.formList[item], 'errorInfo', this.$t('personal.text_7') + this.formList[item].title)
          fla = false
        } else {
          data[item] = this.formList[item].value
        }
      }
      // 判断密码是否正确
      if (data.newLoginPword && !passwordReg.test(data.newLoginPword)) {
        this.$set(this.formList['newLoginPword'], 'errorInfo', this.$t('login.text_07'))
        fla = false
      }
      if (!fla) return false
      let newLoginPword = data.newLoginPword
      this.axios({
        url: this.$store.state.url.personal.password_update,
        headers: {},
        params: data,
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          localStorage.setItem('loginPword', newLoginPword) // 把密码存储到本地
          this.$router.push('/personal/securityCenter')
          this.$store.dispatch('setTipState', this.$t('personal.submitCuccess'))
        } else {
          this.formList.smsAuthCode.startTime = false // 关闭倒计时
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    // 密码表单 眼睛的开启 和 关闭
    textOrPassword () {
      this.formList.loginPword.formType = this.formList.loginPword.formType === 'password' ? 'text' : 'password'
      this.formList.newLoginPword.formType = this.formList.newLoginPword.formType === 'password' ? 'text' : 'password'
    }
  }
}
</script>

